<!-- @format -->

<script setup lang="ts">
import TheIcon from './TheIcon.vue'
const modelValue = defineModel()
const toToggle = () => {
  modelValue.value = !modelValue.value
}
</script>

<template>
  <div class="the-check" :class="{ active: modelValue }" @click="toToggle">
    <the-icon v-if="modelValue" class="the-icon" icon="check1"></the-icon>
    <span><slot></slot></span>
  </div>
</template>

<style scoped>
.the-check {
  position: relative;
  padding: 8rpx 40rpx 8px 50rpx;
  border: 1px solid #e5e5e5;
  border-radius: 40rpx;
  color: #555;
  text-align: center;
}
.the-check .the-icon {
  position: absolute;
  left: 16rpx;
}
.the-check.active {
  color: green;
}
</style>
